
<script setup>
import {onMounted,onBeforeUnmount,ref} from 'vue'
import {adminHomeService} from '@/api/user.js'
import * as echarts from 'echarts';

const info=ref()
const interval=ref()
const result=ref([])
const dates=ref([])
const totals=ref([])
var myChart

const getHomeData=async ()=>{
  const res=await adminHomeService()
  result.value=res.data.list
  console.log(res)
  dates.value=result.value.map(item => (item.item))
  console.log(dates.value)
  totals.value=result.value.map(item=>(item.total))
  myChart.setOption({
    xAxis: {
    type: 'category',
    data: dates.value
  },
  series: [
    {
        name: '动态',
      data: totals.value,
      type: 'bar'
    }
  ]
  })
}
getHomeData()

 onMounted(()=>{
  
  interval.value= setInterval(() => {
        currentDateTime.value = new Date().toLocaleString();
      }, 1000);
    myChart = echarts.init(info.value);
// 指定图表的配置项和数据
var option = {
    title: {
    text: '近七天平台动态发布数量'
  },
  legend: {
    data: ['动态']
  },
  xAxis: {
    type: 'category',
    data: dates.value
  },
  yAxis: {
    type: 'value',
    minInterval: 1,
  },
  series: [
    {
        name: '动态',
      data: totals.value,
      type: 'bar'
    }
  ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
 })


 const currentDateTime = ref(new Date().toLocaleString());

 onBeforeUnmount(()=>{
  clearInterval(interval.value);
 })
</script>

<template>
  <div style="margin-top: 60px;" class="item">
    <p>当前日期时间：{{ currentDateTime || '加载中...'}}</p>
  </div>

    <div  ref="info" style="width: 600px;height:400px;margin-top: 60px;">
    </div>
</template>

<style scoped></style>


